<template>
    <div class="tb-bid">
        <!-- 轮播图 -->
        <div @click="goLocate">
            <carousel></carousel>
        </div>
        <main-content></main-content>

        <div class="title" id="title">电子投标服务 一站式服务</div>
        <template>
            <client-only>
                <section-form class="section-item content" @update="formSubmit" :isLogin="isLogin"></section-form>
            </client-only>
            
            <section-list v-if="isLogin" class="section-item content" ref="list"></section-list>
        </template>

    </div>
</template>

<script>
import {buildTdk} from '@config/tdk';
import carousel from './section/carousel.vue';
import mainContent from './section/main-content.vue';
import SectionAdv from './section/adv.vue';
import SectionForm from './section/form.vue';
import SectionList from './section/list/index.vue';

export default {
    head() {
        return buildTdk('electronicBidding');
    },
    layout: 'client',
    components: {
        carousel,
        mainContent,
        SectionAdv,
        SectionForm,
        SectionList,
    },
    data() {
        return {
            isLogin: null,
        };
    },
    methods: {
        formSubmit() {
            if(!this.$refs.list){ return };

            this.$refs.list.queryData();

            this.$refs.list.$el.scrollIntoView();
        },
        goLocate(){
            document.getElementById("title").scrollIntoView();
        },
    },
    mounted() {
        this.$store.dispatch('userinfo/checkIsLoginNoDoing', {
            login: () => {
                this.isLogin = true;
            },
            noLogin: () => {
                this.isLogin = false;
            },
        });
    },
};
</script>

<style lang="scss" scoped>
.tb-bid {
    padding-top: 12px;
    padding-bottom: 75px;
    width: 1200px;
    margin: 0 auto;

    .section-item {
        background: white;
    }
    .title {
        font-size: 20px;
        color: #252525;
        margin: 30px auto;
        text-align: center;
        font-weight: 600;
    }
}

.no-login {
    position: relative;

    .login-con {
        position: absolute;
        left: 50%;
        top: 10%;
        transform: translate(-50%, -50%);
        background: white;
        padding: 20px 0;
        width: 600px;
        text-align: center;
        box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.13);
    }
}
</style>